/* eslint-disable */
<template>
	<div class="dataSourceDetail">
		<!--主数据明细查询-->
		<el-dialog  :title="$t('components.dataSourceDetail.title')" :visible.sync="show"  width="55%"  @close="closeDialog">
			<el-form  class="dataSourceForm"  :inline="false" :model="dataSourceRow" ref="dataSourceRow" >
				<el-form-item :label="$t('common.resourceName')+'：'" >
					<el-input  disabled v-model="dataSourceRow.resourceName" :placeholder="$t('common.inputPlaceholder')"></el-input>
				</el-form-item>
			</el-form>
			<el-row>
				 <el-col :span="14">
				 	<div class="divide">{{$t('common.mainDataDetail')}}</div>
				 	<div class="border-box" v-if="show">
				 		<el-tree v-if="dataSourceRow.paramStruct==1" v-loading="loadind"   :load="loadNode"  lazy  :check-strictly="true"  :check-on-click-node="true" @check-change="handleCheckChange" highlight-current
				 			 :expand-on-click-node="false"  :props="defaultProps" ></el-tree>
					    <el-table :highlight-current-row="true" v-loading="loadind"  @row-click="rowClick" v-if="dataSourceRow.paramStruct==0" :data="tableData" style="width: 100%">
					      <el-table-column prop="code" :label="$t('common.code')"  show-overflow-tooltip></el-table-column>
					      <el-table-column prop="name" :label="$t('common.name')" show-overflow-tooltip> </el-table-column>
					    </el-table>
					    <el-pagination v-if="dataSourceRow.paramStruct==0"
					      @size-change="pageSizeChange"
					      @current-change="handleCurrentChangePage"
					      :current-page="pagination.pageNum"
					      :page-sizes="[10,20, 50, 100, 200]"
					      :page-size="pagination.pageSize"
					      :pager-count="5"
					      layout="->,prev, pager, next,  sizes,total"
					      :total="pagination.totalSize">
					    </el-pagination>
				 	</div>
				 </el-col>
				 <el-col :span="10">
				 	<div class="divide">{{$t('components.dataSourceDetail.mainDataInfo')}}</div>
				 	<div class="border-box right ">
				 		<el-form   :inline="false" :model="dataSourceRow" ref="dataSourceRow" label-width="100px">
							<el-form-item :label="$t('components.dataSourceDetail.parentId') +'：'" >
								<el-input  readonly v-model="dataSourceRow.parentCode" :placeholder="$t('common.inputPlaceholder')"></el-input>
							</el-form-item>
							<el-form-item :label="$t('components.dataSourceDetail.id') +'：'" >
								<el-input  readonly v-model="dataSourceRow.id" :placeholder="$t('common.inputPlaceholder')"></el-input>
							</el-form-item>
							<el-form-item :label="$t('components.dataSourceDetail.code') +'：'" >
								<el-input  readonly v-model="dataSourceRow.code" :placeholder="$t('common.inputPlaceholder')"></el-input>
							</el-form-item>
							<el-form-item :label="$t('components.dataSourceDetail.name') +'：'" >
								<el-input  readonly v-model="dataSourceRow.name" :placeholder="$t('common.inputPlaceholder')"></el-input>
							</el-form-item>
							<el-form-item :label="$t('components.dataSourceDetail.desc') +'：'" >
								<el-input type="textarea" :rows="2"    readonly v-model="dataSourceRow.desc"  :placeholder="$t('common.inputPlaceholder')"></el-input>
							</el-form-item>
						</el-form>
				 	</div>

				 </el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
import {
    Message, Notification, MessageBox, Loading
} from 'element-ui'
export default {
    name: 'dataSourceDetail',
    props: [
        'visible', 'mainRow'
    ],
    data () {
        return {
            show: false,
            dataSourceRow: {
                resourceName: '',
                paramStruct: 1,
                parentCode: '',
                id: '',
                code: '',
                name: '',
                desc: ''
            },
            treeData: [],
		        defaultProps: {
		          children: 'children',
		          label: 'name'
		        },
		        tableData: [],
		       	pagination: {
                totalSize: 0,
                pageSize: 10,
                pageNum: 1,
                totalPage: 0
            },
            loadind: false

        }
    },
    watch: {
        visible: 'visibleChange'
    },
    mounted () {
    },
    methods: {
        visibleChange (val) {
            this.dataSourceRow = {
                resourceName: this.mainRow.resourceName,
                paramStruct: this.mainRow.paramStruct,
                parentCode: '',
                id: '',
                code: '',
                name: '',
                desc: ''
            }
            this.show = val
	    	if(this.mainRow.paramStruct==0 && val){
                this.searchHttp()
            }
        },
        closeDialog () {
            this.$emit('dataSourceDetailClose')
        },
        loadNode (node, resolve) {
	    	var param = {
                resourceId: this.mainRow.resourceId,
                code: node.data ? node.data.code : 0,
								paramUrl:this.mainRow.paramUrl
            }
            this.loadind = true
            this.$httpExt().post('/dev-basp-system/resource/queryParamsById', param)
                .then((response) => {
                    this.loadind = false
                    var body = response.result
                    return resolve(body)
                }, (response) => {
                    this.loadind = false
                    Notification.error({
                        title: this.$t('common.exception'),
                        message: response.msg ? response.msg : this.$t('common.exceptionWornText')
                    })
                    return resolve([])
                })
        },
        searchHttp () {
            var param = {
                resourceId: this.mainRow.resourceId,
                pageSize: this.pagination.pageSize,
								pageNum:this.pagination.pageNum,
								paramUrl:this.mainRow.paramUrl
            }
            this.loadind = true
            this.$httpExt().post('/dev-basp-system/resource/queryParamsById', param)
                .then((response) => {
                    this.loadind = false
                    var body = response.result
                    this.pagination.totalSize = body.totalSize
                    this.tableData = body.data
                }, (response) => {
                    this.loadind = false
                    Notification.error({
                        title: this.$t('common.exception'),
                        message: response.msg ? response.msg : this.$t('common.exceptionWornText')
                    })
                })
        },
        handleCurrentChangePage (val) {
            this.pagination.pageNum = val
            this.searchHttp()
        },
        pageSizeChange (val) {
            this.pagination.pageNum = 1
            this.pagination.pageSize = val
            this.searchHttp()
        },
        /* 树节点选中状态改变 */
        handleCheckChange (data, checked, indeterminate) {
            this.dataSourceRow = {
                resourceName: this.dataSourceRow.resourceName,
                paramStruct: this.dataSourceRow.paramStruct,
                parentCode: data.parentCode,
                id: data.id,
                code: data.code,
                name: data.name,
                desc: data.desc
            }
		    },
		    rowClick (row, event, column) { /* 列表选中状态改变 */
		    	this.handleCheckChange(row)
		    }
    }
}
</script>
<style lang="less">
.dataSourceDetail{
	.el-dialog{
		min-width:1000px;
	}
	.dataSourceForm{
		.el-dialog__body{
			padding: 30px 50px;
		}
		.el-input,.el-textarea {
			width:300px;
		}
	}
	.divide{
		font-size: 14px;
		color: #48576A;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.border-box{
		width:88%;
		height:590px;
		overflow: auto;
		border: 1px solid #DCDFE6;
		border-radius: 2px;
		box-sizing: border-box;
		.el-form{
			padding: 0 10px;
		}
	}
	.border-box.left{
		border-top:0;
		border-radius: 0 2 2px 2px;
	}
	.border-box.right{
		width:98%;
		padding-top: 20px;
		height:590px;
	}
}
</style>
